// 广州地图

<template>
    <div class="v-gzMap1">
        <div class="echarts-box" ref="gzMap1"></div>
        <el-alert
            title="下载json文件的网站：https://hxkj.vip/demo/echartsMap/"
            type="info"
            effect="dark">
        </el-alert>
    </div>
    
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        // 引入广州地图点位的json
        let guangzhou = require('@/assets/json/guangzhou.json')

        return {
            guangzhou,
            // echarts实例
            gzMap1: null,
            option: {
               tooltip: {
                    trigger: 'item',
                },
                roam: false,
                // 颜色渐变的指示条
                visualMap: {
                    // min: 0,
                    max: 100,
                    // text: ['100分', '0分'],
                    realtime: false,
                    calculable: true,
                    // 从下到上的颜色
                    inRange: {
                        color: ['#92d0ff', '#3c8af5', '#2b63d6']
                    },
                    // 位置
                    right: '0%',
                    bottom: '10%'
                },
                series: [{
                    name: '广州',
                    type: 'map',
                    map: 'guangzhou',
                    label: {
                        show: true,
                        formatter: '{b}({c})'
                    },
                    // 宽高比
                    aspectScale:1.2,
                    // 移入区的高亮配置
                    emphasis:{
                        itemStyle: {
                            areaColor: '#ffd9b3',
                        },
                        label: {
                            show: true,
                            color: '#000'
                        }
                    },
                    zoom:1.2,
                    // 数据模拟
                    data: [
                        {name: "荔湾区", value: 12},
                        {name: "海珠区", value: 43},
                        {name: "越秀区", value: 12},
                        {name: "天河区", value: 43},
                        {name: "黄埔区", value: 55},
                        {name: "白云区", value: 32},
                        {name: "番禺区", value: 65},
                        {name: "南沙区", value: 76},
                        {name: "花都区", value: 1},
                        {name: "增城区", value: 5},
                        {name: "从化区", value: 99}
                    ]
                }]
            }
        }
    },
    mounted() {
        this.gzMap1 = echarts.init(this.$refs.gzMap1)
        echarts.registerMap('guangzhou', this.guangzhou)
        this.gzMap1.setOption(this.option)
        window.addEventListener("resize", () => {
            this.gzMap1.resize()
        })
    }
}
</script>